<template>
  <div>
    <el-container>
      <el-main>
        <div class="conlog-mokuai">
          <div class="conlog-name">
            <div class="conlog-name-font">
              <i class="el-icon-s-unfold"></i>
              数据列表
            </div>
          </div>

          <div class="conlog-content">
            <!-- 数据列表 -->
            <div>
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="loginTime" label="时间" width="250" align="center"></el-table-column>
                <el-table-column prop="ip" label="IP" width="250" align="center"></el-table-column>
                <el-table-column prop="location" label="地区" align="center"></el-table-column>
                <el-table-column prop="browserName" label="浏览器" width="250" align="center"></el-table-column>
              </el-table>
            </div>
            <!-- 分页 -->
            <div class="conlog-paging">
              <div class="conlog-paging-layout">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="pages"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                  ></el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
/* 自定义 */

.conlog-mokuai {
  height: 700px;
  background-color: rgb(249, 249, 249);
  padding-top: 30px;
}
/* .conlog-index {
  width: 80%;
  margin: auto;
  background-color: rgb(255, 255, 255);
} */
.conlog-name {
  width: 100%;
  height: 40px;
  background-color: rgb(240, 240, 240);
}
.conlog-name-font {
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
  color: #666666;
  font-size: 14px;
}
.conlog-content {
  width: 100%;
}

.conlog-paging {
  height: 50px;
  width: 100%;
  background-color: rgb(253, 253, 254);
}
.conlog-paging-layout {
  float: right;
  margin-top: 7px;
}
</style>

<script>
import loginLogApi from "@/api/settings/loginLog";

export default {
  data() {
    return {
      // 列表数据
      tableData: [],
      // 分页
      pageNum: 1,
      pageSize: 10,
      pageTotal: null,
      pages: [5, 10, 20, 30, 50, 100]
    };
  },
  methods: {
    // 初始化数据列表
    initData() {
      loginLogApi.pageList(this.pageNum, this.pageSize).then(response => {
        console.log(response);
        this.tableData = response.data.data.list;
        this.pageTotal = response.data.data.total;
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.initData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.initData();
    }
  },
  created() {
    this.initData();
  }
};
</script>
